<!--
* description: 工单维护-预约
* author: zouzhu
* createdDate: 2021-02-24
-->
<template>
  <el-dialog
    ref="isPopWindows"
    v-dialogDrag
    title="提示"
    :visible.sync="curPopupsVisible"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    center
    @close="close"
    @opened="open"
  >
    <dialogHeader
      slot="title"
      title="预约选择"
      :style-type="$store.state.app.dialogType"
    />
    <div class="formBoxContain">
      <!--
            buttons: 按钮
            froms: 表单
            fromsField: 表单对应的字段
            tableOption: 网格项
            dynamicApiConfigs: 取值
         -->
      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="buttons"
        :dynamic-components="froms"
        :dynamic-form-fields="fromsField"
        :dynamic-table-cols="tableOption"
        :dynamic-api-config="dynamicApiConfigs"
        :dynamic-is-show-select="false"
        :dynamic-is-show-more-btn="true"
        :dynamic-is-init-table="false"
        :dynamic-is-fix-choose="false"
        :dynamic-is-fix-index="false"
        :dynamic-api-style="'restful'"
      />
    </div>
  </el-dialog>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import dialogHeader from '@/components/dialogHeader'
import OneTableTemplate from '@/components/templates/oneTable'
import { orgApis } from '@/api/sebasicdataapi'

export default {
  components: {
    dialogHeader,
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    // 是否关闭弹窗
    popupsVisible: {
      type: Boolean,
      default: false
    },
    appointmentTime: {
      type: Object, default: () => ({})
    }
  },
  data() {
    return {
      allList: [],
      dynamicApiConfigs: orgApis.appointmentChooseFindxian,
      froms: this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
             this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableComponents &&
             this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableComponents.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableComponents : [
          {
            compKey: 'compKey1',
            labelName: '车牌号：',
            codeField: 'carLicense',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            disabled: true,
            isMust: true,
            span: 6
          },
          {
            compKey: 'compKey2',
            labelName: 'VIN码：',
            codeField: 'vin',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            disabled: true,
            isMust: true,
            span: 6
          },
          {
            compKey: 'compKey3',
            labelName: '车主姓名：',
            codeField: 'custName',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            disabled: true,
            isMust: true,
            span: 6
          }
        ],
      fromsField: {
        carLicense: '',
        vin: '',
        custName: ''
      },
      buttons:
        [
          {
            compKey: 'btnKey1',
            type: 'primary',
            size: 'small',
            clickEvent: () => this.queryTable(1),
            text: this.$t('sys.button.query'), // 查询
            name: 'search', // 按钮图标样式
            position: 'right',
            fuzzySearch: true
          }
        ],
      tableOption: [
        {
          prop: 'controlBtn',
          label: '操作',
          codeField: 'controlBtn',
          width: 60,
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'propKey1',
              labelName: '选择',
              codeField: 'delControlBtn',
              clickEvent: index => this.queryArticle(index),
              component: () => import('@/components/org/linkButton')
            }
          ]
        },
        {
          prop: 'reserveOrderCode',
          label: '预约单号',
          align: 'center'
        },
        {
          prop: 'reserveMan',
          label: '预约人',
          align: 'center'
        },
        {
          prop: 'reserveTel',
          label: '预约电话',
          align: 'center'
        },
        {
          prop: 'preComeDate',
          label: '预约时间',
          align: 'center'
        },
        {
          prop: 'reserveStateName',
          label: '预约状态',
          align: 'center'
        },
        {
          prop: 'saName',
          label: '服务顾问',
          align: 'center'
        },
        {
          prop: 'reserveSource',
          label: '预约来源',
          align: 'center'
        }
      ]
    }
  },
  methods: {
    /**
     * @description 关闭弹窗
     * @time 2021、01、22
     */

    queryArticle(index) {
      const info = {}
      info.reserveOrderId = this.$refs.multipleTable.list[index].reserveOrderId
      const queryObj = {
        // 保存mutation
        type: 'mutation',
        // api配置
        apiConfig: orgApis.queryAppointmentWiAndPart,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: info
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        if (response.result === '1') {
          this.allList = response.rows[0]
          this.allList.wis.forEach(element => {
            element.wiName = element.repairContent
            element.repairTypeName = element.rrpairSmallKindName
            element.saleWorkQty = element.saleWiQty
            element.wiPreAmount = element.total
            element.payKind = ''
            element.wiAmount = ''
            element.groupName = ''
            element.repairTechnician = ''
            element.servicePackageCode = ''
            element.isEntrust = ''
            element.isEntrustCode = ''
            element.comboSaleCode = ''
            element.repairTypeCode = ''
            element.note = ''
            element.repairGroup = ''
          })
          this.allList.parts.forEach(element => {
            element.partQty = element.partNum
            element.partPrice = element.userPrice
            element.prePartAmount = element.total
            element.repairTypeName = element.partRepairType
            element.payKind = ''
            element.retRepairTypeName = ''
            element.partAmount = ''
            element.comboSaleCode = ''
            element.isEntrust = ''
            element.repairTypeCode = ''
            element.isEntrustCode = ''
            element.note = ''
          })
          this.allList.others.forEach(element => {
            element.payKind = ''
            element.retRepairTypeName = ''
            element.servicePackageCode = ''
          })
        }
        this.allList.reserveOrderCode = this.$refs.multipleTable.list[index].reserveOrderCode
        this.$emit('event1', this.allList)
        this.curPopupsVisible = false
      })
    },
    close() {
      this.$emit('close')
    },
    open() {
      const that = this
      this.fromsField.carLicense = this.appointmentTime.carLicense
      this.fromsField.custName = this.appointmentTime.custName
      this.fromsField.vin = this.appointmentTime.vin
      this.$nextTick(() => {
        that.queryTable(1)
      })
    }

  }
}
</script>
<style scoped>
.formBoxContain {
  height: 600px;
}
</style>
